<template>
  <div class="item">
    <div class="bg-white dark:bg-zinc-800 duration-500">
      <div class="img-wrapper" ref="imgWrapperRef" @click="onToPinsClick">
        <img
          v-lazy
          ref="imgRef"
          :src="data.photo"
          :style="{
            height: (width / data.photoWidth) * data.photoHeight + 'px',
            backgroundColor: randomRGB()
          }"
        />
        <div class="mask" v-if="isMobileTerminal ? false : isMask">
          <m-button size="primary" class="share">分享</m-button>
          <m-button
            size="mini"
            class="love"
            icon="woxihuan-"
            type="info"
          ></m-button>
          <m-button
            size="mini"
            class="download"
            icon="upload"
            type="info"
            @click="handleDownload"
          ></m-button>
          <m-button
            size="mini"
            class="screen"
            type="info"
            @click="handleFullScreen"
            >全屏</m-button
          >
        </div>
      </div>
      <p class="title dark:text-zinc-300">{{ data.title }}</p>
      <div class="author">
        <img class="author-avatar" :src="data.avatar" />
        <span class="author-name dark:text-zinc-300">{{ data.author }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineEmits, computed, onMounted } from 'vue'
import { saveAs } from 'file-saver'
import randomRGB from '@/utils/randomRGB'
import { message } from '@/libs'
import { useFullscreen, useElementBounding } from '@vueuse/core'
import { isMobileTerminal } from '@/utils/flexible'

const props = defineProps({
  data: Object,
  width: {
    type: Number
  }
})

const emits = defineEmits(['itemImgClick'])

const imgWrapperRef = ref(null)

// const {
//   x: imgWrapperX,
//   y: imgWrapperY,
//   width: imgWrapperWidth,
//   height: imgWrapperHeight
// } = useElementBounding(imgWrapperRef)

// // 计算图片中心位置
// const useImgWrapperCenter = computed(() => {
//   const left = imgWrapperX.value + imgWrapperWidth.value / 2
//   const top = imgWrapperY.value + imgWrapperHeight.value / 2

//   return {
//     left,
//     top
//   }
// })

const imgContainerCenter = () => {
  const {
    x: imgContainerX,
    y: imgContainerY,
    width: imgContainerWidth,
    height: imgContainerHeight
  } = imgWrapperRef.value.getBoundingClientRect()
  return {
    left: parseInt(imgContainerX + imgContainerWidth / 2),
    top: parseInt(imgContainerY + imgContainerHeight / 2)
  }
}

/**
 * 点击图片，进入详情
 */
const onToPinsClick = () => {
  emits('itemImgClick', { id: props.data.id, location: imgContainerCenter() })
}

/**
 * 下载图片
 */
const handleDownload = () => {
  message('success', '正在加速为您下载图片 -><-')
  setTimeout(saveAs(props.data.photoDownLink), 100)
}

/**
 * 全屏
 */
const imgRef = ref(null)
const { enter: handleFullScreen } = useFullscreen(imgRef)

/**
 * PC端屏幕过小，或者移动端下 不显示四个操作按钮
 */
const isMask = ref(true)
const observerMask = () => {
  if (isMobileTerminal.value || window.innerWidth < 800) {
    isMask.value = false
  } else {
    isMask.value = true
  }
}

window.addEventListener('resize', observerMask)

onMounted(() => {
  observerMask()
})
</script>

<style lang="scss" scoped>
.item {
  display: flex;
  flex-direction: column;
  font-size: 0.14rem;
  .img-wrapper {
    position: relative;
    cursor: pointer;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    &:hover {
      .mask {
        background-color: rgba(0, 0, 0, 0.468);
        opacity: 1;
      }
    }
    img {
      width: 100%;
      height: 100%;
    }
    .mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      background-color: rgba(0, 0, 0, 0);
      transition: all 0.3s;
      .share {
        position: absolute;
        left: 10px;
        top: 15px;
      }
      .love {
        position: absolute;
        right: 10px;
        top: 15px;
        color: $primary-text-color;
      }
      .download {
        position: absolute;
        left: 10px;
        bottom: 15px;
        color: $primary-text-color;
      }
      .screen {
        position: absolute;
        right: 10px;
        bottom: 15px;
        color: $primary-text-color;
      }
    }
  }
  .title {
    font-size: 0.15rem;
    font-weight: bold;
    padding: 5px 5px;
    box-sizing: border-box;
  }
  .author {
    display: flex;
    align-items: center;
    padding: 5px 5px;
    box-sizing: border-box;
    &-avatar {
      width: 0.2rem;
      height: 0.2rem;
      border-radius: 50%;
      margin-right: 10px;
    }
    &-name {
      font-size: 0.13rem;
      color: #455c70;
    }
  }
}
</style>
